<template>
  <nav :class="{ fixedTop: fixed }">
    <span @click="urlFn('/list')" class="iconfont icon-arrow_left"></span>
    <div class="title">
      <span>商品</span>
      <span>详情</span>
      <span>推荐</span>
    </div>
    <!-- <span class="iconfont icon-gengduo"> -->
    <van-popover
      placement="bottom-end"
      v-model="showPopover"
      theme="dark"
      trigger="click"
      :actions="actions"
    >
      <template #reference>
        <span class="iconfont icon-gengduo" type="primary"></span>
      </template>
    </van-popover>
    <!-- </span> -->
  </nav>
</template>

<script>
import "@/assets/icon/iconfont.css";
import _ from "lodash";
export default {
  data() {
    return {
      fixed: false,
      showPopover: false,
      actions: [{ text: "首页" }, { text: "搜索" }, { text: "客服" },{ text: "反馈" },{ text: "我的" }],
    };
  },
  mounted() {
    window.addEventListener("scroll", _.throttle(this.updateScrollFn, 500));
  },
  methods: {
    updateScrollFn() {
      let top = document.documentElement.scrollTop;
      if (top > 150) {
        this.fixed = true;
      } else {
        this.fixed = false;
      }
    },
    urlFn(url){
      this.$router.push(url)
    }
  },
};
</script>

<style lang="scss" scoped>
.fixedTop {
  position: fixed;
  top: 0;
  transition: all 0.3s;
  // display: block;

  width: 100%;
  height: 45px;
  line-height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #fff;

  .title {
    display: inline-block;
  }
  span.iconfont {
    display: inline-block;
    height: 45px;
    line-height: 45px;
    font-size: 30px;
    color: #333;
    background: none;
  }
  .title span {
    font-size: 15px;
    margin-right: 30px;
    color: #666666;
  }
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  // display: none;
  width: 100%;
  height: 45px;
  line-height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.title {
  display: none;
}
span.iconfont {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  font-size: 30px;
  color: #fff;
  background: rgba($color: #727070, $alpha: 0.7);
}
</style>